<template>
  <div class="container">
    <div class="app-container">
      <el-button class="btn" type="primary" size="mini" @click="showDialog=true">添加权限</el-button>
      <el-table :data="permList" row-key="id" default-expand-all>
        <el-table-column label="名称" prop="name" />
        <el-table-column align="center" label="标识" prop="code" />
        <el-table-column align="center" label="描述" prop="description" />
        <el-table-column align="center" label="操作">
          <template v-slot="{row}">
            <el-button
              v-if="row.type===1"
              type="text"
              size="mini
            "
              @click="inlineAdd(row.id)"
            >添加</el-button>
            <el-button
              type="text"
              size="mini
            "
              @click="edit(row.id)"
            >编辑</el-button>
            <el-popconfirm
              title="您确定要删除吗？"
              @onConfirm="del(row.id)"
            >
              <el-button
                slot="reference"
                type="text"
                size="mini
            "
                style="margin-left: 10px"
              >删除</el-button>
            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 弹框组件 -->
    <perm-dialog :id="id" ref="permDia" :show-dialog.sync="showDialog" @reset="(n)=>id=n" @success="getPermList" />
  </div>
</template>
<script>
import { getPermList, del } from '@/api/permission'
import { transListToTreeData } from '@/utils'
import permDialog from '../permission/components/permisson-dialog.vue'
export default {
  name: 'Prmission',
  components: { permDialog },
  data() {
    return {
      permList: [],
      showDialog: false,
      id: null
    }
  },
  created() {
    this.getPermList()
  },
  methods: {
    async getPermList() {
      const res = await getPermList()
      this.permList = transListToTreeData(res, 0)
    },
    // 行内添加
    inlineAdd(id) {
      this.open(id)
    },
    // 删除功能
    async del(id) {
      await del(id)
      this.$message.success('删除成功!')
      this.getPermList()
    },
    // 编辑功能
    edit(id) {
      this.open(id)
      // 调用子组件gobackData方法进行数据回显
      this.$nextTick(() => {
        this.$refs.permDia.gobackData()
      })
    },
    open(id) {
      this.showDialog = true
      this.id = id
    }
  }
}
</script>
  <style scoped>
.btn{
  margin: 10px;
}</style>
